<template>
  <div class="add-product-dialog">
    <div class="dib vam out-button" @click="show = true">
      <slot>
        <el-button type="primary" class="el-icon-plus" plain>{{text}}</el-button>
      </slot>
    </div>
    <el-dialog :title="dialogTitle"
               :visible.sync="show">
      <gl-form :form="form"
               ref="form"
               :formLabel="formLabel"
               :must="must">
        <div class="tabs unselect" slot="tabs" slot-scope="{data}">
          <div class="tab dib vam ovh por mr10"
               v-for="(item, i) in tabs[data.prop]" :key="i + data.prop">
            <i class="el-icon-close poa csp transition" @click="tabs[data.prop].splice(i, 1)"></i>
            {{item.label}}
          </div>
          <div class="tab dib vam add csp el-icon-plus" @click="addTabs(data)">添加</div>
        </div>
      </gl-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="addProduct">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="innerType.label" :visible.sync="innerShow">
      <div class="inner-list">
        <div class="inner-item"></div>
      </div>
      <el-checkbox-group class="inner-list jcb flex fww" v-model="selects">
        <el-checkbox v-for="(item, i) in allTabs[innerType.prop] || []" :key="i"
                     class="inner-item mb10"
                     :label="item.value" border>{{item.label}}
        </el-checkbox>
      </el-checkbox-group>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="innerShow = false">取 消</el-button>
        <el-button type="primary" @click="selectsSure">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    computed: {
      ...mapGetters(['userInfo'])
    },
    props: {
      text: {
        type: String,
        default: '添加'
      },
      customer_id: {
        default: ''
      },
      dialogTitle: {
        type: String,
        default: '添加产品'
      },
      form: {
        type: Object,
        default() {
          return {
            name: '',
            customer_id: '',
            auth_id: '',
            aw_id: '',
            endtime: '',
            tpa_id: '',
            channel_id: '',
            sum_times: '',
            remark: ''
          };
        }
      },
      formLabel: {
        type: Array,
        default() {
          return [
            {
              label: '选择客户',
              prop: 'customer_id',
              options: [],
              placeholder: '请输入'
            },
            {label: '产品名称：', prop: 'name', placeholder: '请输入'},
            {
              label: '授权方式：',
              prop: 'auth_id',
              placeholder: '请输入',
              options: []
            },
            {
              label: '激活方式：',
              prop: 'aw_id',
              placeholder: '请输入',
              options: []
            },
            {label: '使用期限：', prop: 'endtime', placeholder: '请输入'},
            {label: '通讯时长：', prop: 'sum_times', placeholder: '请输入'},
            {label: '第三方集成：', prop: 'tpa_id', slot: 'tabs'},
            {label: '渠道标签：', prop: 'channel_id', slot: 'tabs'},
            {
              label: '产品描述：',
              prop: 'remark',
              type: 'textarea',
              text: 'ueditor',
              placeholder: '请输入'
            }
          ]
        },
      },

    },
    data() {
      return {
        show: false,
        innerShow: false,
        must: 'name,auth_id,aw_id,endtime,sum_times,customer_id',
        tabs: {
          tpa_id: [],
          channel_id: [],
        },
        innerType: {},
        allTabs: {
          tpa_id: [],
          channel_id: [],
        },

        selects: [],
      };
    },
    watch: {
      show(val) {
        if (val) {
          this.getCustomerList();
          this.getAW();
          this.getAuths();
          this.form.customer_id = this.customer_id || '';
        } else {
        }
      },
      innerShow(val) {
        if (val) {
          this.innerType.prop === 'channel_id' ? this.getChannelList() : this.getThird();
        }
      },
    },
    created() {
      this.customer_id && this.formLabel.shift();
    },
    methods: {
      getAuths() {
        let item = this.formLabel.find(e => e.prop === 'auth_id');
        if (item && item.options && !item.options.length) {
          this.http
            .$post('admin/auth.api/list_auths')
            .then(r => {
              //   console.log(r)
              item.options = r.map(e => ({
                label: e.auth_name,
                value: e.auth_id
              }))
            })
            .catch(console.log)
        }
      },
      getAW() {
        let item = this.formLabel.find(e => e.prop === 'aw_id');
        if (item && item.options && !item.options.length) {
          this.http
            .$post('admin/Product.api/get_aw')
            .then(r => {
              //   console.log(r)
              item.options = r.map(e => ({
                label: e.name,
                value: e.id
              }))
            })
            .catch(console.log)
        }
      },
      getCustomerList() {
        let item = this.formLabel.find(e => e.prop === 'customer_id');
        if (item && item.options && !item.options.length) {
          this.http.$post('admin/customer.api/list_customers', {
            company_id: this.userInfo.company_id,
          }).then(res => {
            item.options = res.map(e => ({label: e.name, value: e.id}));
          }).catch(console.log);
        }
      },
      addTabs(item) {
        this.innerType = item;
        let type = this.innerType.prop;
        this.selects = this.tabs[type].map(e => e.value);
        this.innerShow = true;
      },
      selectsSure() {
        let type = this.innerType.prop;
        this.tabs[type] = this.allTabs[type].filter(e => this.selects.includes(e.value));
        this.innerShow = false;
        this.innerType = {};
        this.selects = [];
      },
      getThird(item) {
        item = this.allTabs[this.innerType.prop];
        if (item && !item.length) {
          this.http.$post('admin/thirdpa.api/all_lists').then(r => {
            this.allTabs[this.innerType.prop] = r.map(e => ({label: e.tpa_name, value: e.tpa_id}));
          }).catch(console.log);
        }
      },
      getChannelList(item) {
        item = this.allTabs[this.innerType.prop];
        if (item && !item.length) {
          this.http.$post('admin/channel.Api/all_lists').then(r => {
            this.allTabs[this.innerType.prop] = r.map(e => ({label: e.channel_name, value: e.channel_id}));
          }).catch(console.log);
        }
      },
      addProduct() {
        if (!this.$refs.form.validate()) return;
        let params = {...this.form};
        let url = 'admin/product.api/add';
        params.customer_id = params.customer_id || this.customer_id || '';
        params.channel_id = this.tabs.channel_id.map(e => e.value).join(',');
        params.tpa_id = this.tabs.tpa_id.map(e => e.value).join(',');
        params.id && (url = 'admin/product.api/edit');
        this.http.$post(url, params).then(r => {
          this.$emit('success', params);
          this.$message.success(params.id ? '编辑成功' : '新增成功');
          this.show = false;
          this.$refs.form.resetFields();
        }).catch(this.$err);
      },
    },
  }
</script>

<style scoped lang="less">
  .tabs {
    .tab {
      padding: 0 15px;
      line-height: 40px;
      border-radius: 5px;
      border: 1px #ddd solid;
      transition: .3s all;
      &:hover {
        padding-right: 25px;
        .el-icon-close {
          opacity: 1;
        }
      }
    }
    .el-icon-close {
      line-height: 40px;
      right: 5px;
      opacity: 0;
    }
    .add {
      padding-right: 15px !important;
      border-style: dashed;
      &.el-icon-plus {
        &::before {
          margin-right: 10px;
        }
      }
    }
  }

  .el-dialog {
    .inner-list {
      .inner-item {
        margin-left: 0;
      }
    }
  }
</style>